<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-08-07 17:50:08
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-08-08 09:26:19
 * @FilePath: \出口卖家端\src\components\Tinymce\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <vue3-tinymce
      script-src="/tinymce/tinymce.min.js"
      :disabled="disabled"
      v-model="content"
      :setting="setting"
    />
  </div>
</template>
<script setup>
import Vue3Tinymce from "@jsdawn/vue3-tinymce";
import { ref, computed, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { useTrigger } from "@/hooks/useValidatorRules.js";
const { emitTrigger } = useTrigger();
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
});
const content = computed({
  get: () => {
    return props.modelValue || "";
  },
  set: (data) => {
    emits("update:modelValue", data);
    emitTrigger();
  },
});

const toolbar = () => {
  const d = [
    "code undo redo restoredraft",
    "forecolor backcolor bold italic underline strikethrough link codesample",
    "alignleft aligncenter alignright alignjustify outdent indent formatpainter",
    "bold italic underline h1 h2 blockquote codesample numlist bullist link image",
  ];
  return d.join("|");
};
const plugins = () => {
  const d = ["codesample link image table lists fullscreen"];
  return d.join("|");
};
const formats = () => {
  const d = [
    "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif",
    "苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif",
    "仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif",
    "Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino",
  ];
  return d.join(";");
};
const setting = ref({
  language: "zh-Hans", //语言类型
  language_url: "/tinymce/langs/zh-Hans.js",
  toolbar: toolbar(),
  plugins: plugins(),
  font_formats: formats(),
  images_upload_handler: (blobInfo, success) => {
    const formData = new FormData();
    formData.append("uploadFile", blobInfo.blob(), blobInfo.filename());
    return proxy.$post({ url: "/upload", data: formData }).then((res) => {
      return res.url;
    });
  },
  placeholder: props.placeholder,
});
</script>